<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 餐段 -->
      <uni-card title="餐段" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.chanDuan"
            :localdata="chanDuan"
          />
        </uni-forms-item>
      </uni-card>

      <!-- 食品名称 -->
      <uni-card title="食品名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput type="textarea" v-model="formData.foodName" />
        </uni-forms-item>
      </uni-card>
      <!-- 烹饪/再加热/冷保温/热保温 -->
      <uni-card title="烹饪/再加热/冷保温/热保温" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox v-model="formData.penRen" :localdata="penRen" />
        </uni-forms-item>
      </uni-card>
      <!-- 时间(烹饪/再加热则填写开始时间--结束时间) -->
      <uni-card title="时间" extra="必填*">
        <uni-forms-item>
          <text>烹饪/再加热则填写开始时间--结束时间</text>
          <uni-easyinput v-model="formData.time" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品温度 -->
      <uni-card title="食品温度" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.foodTemperature" />
        </uni-forms-item>
      </uni-card>
      <!-- 纠正措施 -->
      <uni-card title="纠正措施" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.jiuZhenChuoShi"
            :localdata="jiuZhenChuoShi"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 填报人姓名 -->
      <uni-card title="填报人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.tianBaoRenXinMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="reShiHeLengShi"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  chanDuan: '', // 餐段chanDuan
  foodName: '', // 食物名称foodName
  penRen: '', // 烹饪/再加热penRen
  time: '', //时间time
  foodTemperature: '', //食品温度foodTemperature
  jiuZhenChuoShi: '', //纠正措施 jiuZhenChuoShi
  tianBaoRenXinMing: '', //填报人姓名
});

//餐段
const chanDuan = [
  {
    text: '早餐',
    value: '早餐',
  },
  {
    text: '午餐',
    value: '午餐',
  },
  {
    text: '晚餐',
    value: '晚餐',
  },
  {
    text: '茶歇',
    value: '茶歇',
  },
  {
    text: '宵夜',
    value: '宵夜',
  },
];
//烹饪/再加热/冷保温/热保温
const penRen = [
  {
    text: '烹饪',
    value: '烹饪',
  },
  {
    text: '再加热',
    value: '再加热',
  },
  {
    text: '冷保温',
    value: '冷保温',
  },
  {
    text: '热保温',
    value: '热保温',
  },
];
// 纠正措施
const jiuZhenChuoShi = [
  {
    text: '无需纠正',
    value: '无需纠正',
  },
  {
    text: '持续烹饪至适当温度',
    value: '持续烹饪至适当温度',
  },
  {
    text: '冷藏至适当温度',
    value: '冷藏至适当温度',
  },
  {
    text: '再加热至适当温度',
    value: '再加热至适当温度',
  },
  {
    text: '丢弃',
    value: '丢弃',
  },
];

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    chanDuan: '', // 餐段chanDuan
    foodName: '', // 食物名称foodName
    penRen: '', // 烹饪/再加热penRen
    time: '', //时间time
    foodTemperature: '', //食品温度foodTemperature
    jiuZhenChuoShi: '', //纠正措施 jiuZhenChuoShi
    tianBaoRenXinMing: '', //填报人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
